<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全军概况</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common/index.css">
    <link rel="stylesheet" href="../css/summary.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 顶栏导航 begin -->
    <div class="layui-header">
        <div class="layui-logo">
            <img src="../images/logo.png" class="x-logo">
            <img src="../images/title.png" class="x-top-title">
        </div>
        <div class="layui-layout-right">
            <ul class="layui-nav x-top-nav">
                <li class="layui-nav-item active">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            首页
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            任务核查
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-index.png">
                            人员管理
                        </div>
                        <i class="split-line"></i></a></li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">
                        <div class="nav-top-item">
                            <img class="nav-top-icon" src="../images/nav/nav-tjfx.png">
                            统计分析
                        </div>
                        <i class="split-line"></i>
                    </a>
                </li>
            </ul>
            <ul class="x-nav-user">
                <li class="layui-nav-item">
                    <dl class="x-user-info">
                        <dd class="x-user-photo">
                            <img src="../images/user.png">
                        </dd>
                        <dd class="x-user-text-box">
                            <span class="x-user-name">系统管理员：王要得</span>
                            <span class="x-user-score">积分：279</span>
                        </dd>
                        <dd class="x-user-logout">
                            <img class="nav-logout-icon" src="../images/nav/nav-logout.png">
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <!-- 顶栏导航 end -->

    <!-- 主体内容 begin -->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="width: 1200px; margin: auto;" class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">全国背景审查数据流向图</div>
                    <div class="layui-card-body">
                        <div class="x-china-rank">
                            <span class="x-top-tip">TOP</span>
                            <span class="x-top-buttom" id="switch">
                                背审数据排行
                                <i class="x-bottom-icon x-bi-t">▲</i>
                                <i class="x-bottom-icon x-bi-b">▼</i>
                            </span>
                            <div class="x-top-list">
                                <dl>
                                    <dt>1</dt>
                                    <dd>北京市</dd>
                                    <dd>120</dd>
                                </dl>
                                <dl>
                                    <dt>2</dt>
                                    <dd>广州市</dd>
                                    <dd>100</dd>
                                </dl>
                                <dl>
                                    <dt>3</dt>
                                    <dd>青岛市</dd>
                                    <dd>98</dd>
                                </dl>
                                <dl>
                                    <dt>4</dt>
                                    <dd>沈阳市</dd>
                                    <dd>87</dd>
                                </dl>
                                <dl>
                                    <dt>5</dt>
                                    <dd>成都市</dd>
                                    <dd>77</dd>
                                </dl>
                                <dl>
                                    <dt>6</dt>
                                    <dd>天津市</dd>
                                    <dd>71</dd>
                                </dl>
                                <dl>
                                    <dt>7</dt>
                                    <dd>西安市</dd>
                                    <dd>54</dd>
                                </dl>
                                <dl>
                                    <dt>8</dt>
                                    <dd>南京市</dd>
                                    <dd>36</dd>
                                </dl>
                                <dl>
                                    <dt>9</dt>
                                    <dd>石家庄市</dd>
                                    <dd>23</dd>
                                </dl>
                                <dl>
                                    <dt>10</dt>
                                    <dd>湛江市</dd>
                                    <dd>10</dd>
                                </dl>
                            </div>
                        </div>
                        <div id="mapBox" class="x-china-box">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <!--案件统计和自杀统计-->
                <div class="layui-card layui-tab layui-tab-brief" lay-filter="chartTab">
                    <div class="layui-card-header">
                        背景审查数量统计图
                    </div>
                    <div class="layui-card-body">
                        <div class="x-pie-box" id="pie-one"></div>
                    </div>
                </div>
                <!--信息采集统计-->
                <div class="layui-card">
                    <div class="layui-card-header">
                        背景审查人数统计
                    </div>
                    <div class="layui-card-body">
                        <div class="x-bar-box" id="pie-two"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体内容 end -->

    <!-- 底栏 begin -->
    <div class="layui-footer layui-footer-full">
        <!-- 底部固定区域 -->
        主程序版本号: V1.0.0.1
    </div>
    <!-- 底栏 end -->
</div>

<script src="../../lib/layui/layui.all.js"></script>
<script src="../../lib/jquery-1.9.1.min.js"></script>
<script src="../../lib/echarts/echarts.js"></script>
<script src="../js/china.js"></script>
<script>
    (function () {
        // 模拟数据
        // 数据流动
        var cityData = [
            [{name: '北京'}, {name: '上海', value: 95}],
            [{name: '北京'}, {name: '广州', value: 90}],
            [{name: '北京'}, {name: '大连', value: 80}],
            [{name: '北京'}, {name: '长春', value: 40}],
            [{name: '北京'}, {name: '包头', value: 30}],
            [{name: '北京'}, {name: '重庆', value: 20}],
            [{name: '北京'}, {name: '常州', value: 10}],
            [{name: '上海'}, {name: '包头', value: 95}],
            [{name: '上海'}, {name: '昆明', value: 90}],
            [{name: '上海'}, {name: '广州', value: 80}],
            [{name: '上海'}, {name: '郑州', value: 70}],
            [{name: '上海'}, {name: '长春', value: 60}],
            [{name: '广州'}, {name: '福州', value: 95}],
            [{name: '广州'}, {name: '太原', value: 90}],
            [{name: '广州'}, {name: '长春', value: 80}],
            [{name: '广州'}, {name: '重庆', value: 70}],
            [{name: '广州'}, {name: '西安', value: 160}],
            [{name: '广州'}, {name: '海口', value: 10}]
        ]
        // 背景审查数量统计图
        var casePieData = [
            {value: 150, name: '类型1', itemStyle: {color: '#6bb9f1'}},
            {value: 250, name: '类型2', itemStyle: {color: '#ffc08d'}},
            {value: 120, name: '类型3', itemStyle: {color: '#dc888d'}},
            {value: 200, name: '类型4', itemStyle: {color: '#beace2'}},
            {value: 280, name: '类型5', itemStyle: {color: '#a2bd64'}},
            {value: 320, name: '类型6', itemStyle: {color: '#e8d426'}}
        ]
        // 背景审查人数统计
        var suicidePieData = [
            {value: 150, name: '士官', itemStyle: {color: '#6bb9f1'}},
            {value: 250, name: '职员', itemStyle: {color: '#ffc08d'}},
            {value: 100, name: '文职', itemStyle: {color: '#dc888d'}},
            {value: 200, name: '士官2', itemStyle: {color: '#beace2'}},
            {value: 200, name: '其他', itemStyle: {color: '#a2bd64'}},
            {value: 100, name: '军官', itemStyle: {color: '#e8d426'}}
        ]


        // 实例对象缓存
        var echartsCache = {
            caseChart: null,
            suicideChart: null,
            infoChart: null
        }
        var fun = {
            /**
             * 全军案发地点态势图
             */
            mapChart: function () {
                drawMap.reloadMap()
                drawMap.init({
                    $: layui.$,
                    el: document.getElementById('mapBox'),
                    cityData: cityData,
                    mapData: []
                })
            },

            /**
             * 背景审查数量统计图
             */
            caseChart: function () {
                if (echartsCache.caseChart) {
                    echartsCache.caseChart.dispose()
                }
                echartsCache.caseChart = echarts.init(document.getElementById('pie-one'))
                var legendData = []  // 图例数据
                var caseCount = 0 // 总数和
                for (var i = 0; i < casePieData.length; i++) {
                    legendData.push(casePieData[i].name)
                    caseCount += (casePieData[i].value || 0)
                }

                echartsCache.caseChart.setOption({
                    title: {
                        show: false,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}({d}%)"
                    },
                    legend: {
                        x: 'center',
                        top: 7,
                        itemWidth: 16,
                        itemHeight: 16,
                        data: legendData
                    },
                    grid: {
                        show: false,
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            selectedMode: false,
                            legendHoverLink: false,
                            hoverAnimation: false,
                            center: ['50%', '60%'],
                            radius: [0, '10%'],
                            silent: true,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: caseCount, name: '', itemStyle: {color: '#E3F6FF'}},
                            ]
                        },
                        {
                            type: 'pie',
                            roseType: true,
                            center: ['50%', '60%'],
                            radius: ['15%', '70%'],
                            label: {
                                show: true,
                                formatter: '{b}'
                            },
                            labelLine: {
                                show: true,
                                length: 10,
                                length2: 20
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0,0,0,0.45)',
                                textStyle: {
                                    color: '#ffffff',
                                    fontFamily: 'Microsoft YaHei'
                                },
                                formatter: function (p) {
                                    var str = p.data.name
                                    if (p.data.value) {
                                        str = p.data.name + '（' + p.data.value + '）'
                                    }
                                    return str
                                }
                            },
                            data: casePieData
                        }
                    ]

                });
            },

            /**
             * 背景审查人数统计
             */
            suicideChart: function () {
                if (echartsCache.suicideChart) {
                    echartsCache.suicideChart.dispose()
                }
                echartsCache.suicideChart = echarts.init(document.getElementById('pie-two'))
                var legendData = []  // 图例数据
                var suicideCount = 0 // 总数和
                for (var i = 0; i < suicidePieData.length; i++) {
                    legendData.push(suicidePieData[i].name)
                    suicideCount += (suicidePieData[i].value || 0)
                }

                echartsCache.suicideChart.setOption({
                    title: {
                        show: false
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{b}({d}%)"
                    },
                    legend: {
                        x: 'center',
                        top: 8,
                        itemWidth: 16,
                        itemHeight: 16,
                        data: legendData
                    },
                    grid: {
                        show: false,
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0
                    },
                    series: [
                        {
                            type: 'pie',
                            center: ['50%', '60%'],
                            radius: ['0', '60%'],
                            label: {
                                show: true,
                                formatter: '\n{hr|}\n{b}({c})',
                                rich: {
                                    hr: {
                                        width: '100%',
                                        height: 1,
                                        backgroundColor: 'auto',
                                        shadowBlur: 2,
                                        shadowOffsetX: 2,
                                        padding: [0, 10]
                                    }
                                }
                            },
                            labelLine: {
                                show: true,
                                length: 10,
                                length2: 20
                            },
                            tooltip: {
                                backgroundColor: 'rgba(0,0,0,0.45)',
                                textStyle: {
                                    color: '#ffffff',
                                    fontFamily: 'Microsoft YaHei'
                                },
                                formatter: function (p) {
                                    var str = p.data.name
                                    if (p.data.value) {
                                        str = p.data.name + '（' + p.data.value + '）'
                                    }
                                    return str
                                }
                            },
                            data: suicidePieData
                        }
                    ]

                });
            }
        }

        /* 初始化相关数据 */
        function init() {
            // 切换显示态势排行列表
            var currentShow = false
            $('#switch').on('click', function () {
                if (!currentShow) {
                    $('.x-bi-t').hide();
                    $('.x-bi-b').show();
                    $('.x-top-list').show();
                } else {
                    $('.x-bi-t').show();
                    $('.x-bi-b').hide();
                    $('.x-top-list').hide();
                }
                currentShow = !currentShow
            })
            // 初始化图表
            fun.mapChart()
            fun.caseChart()
            fun.suicideChart()
        }

        init()
        window.addEventListener('resize', function () {
            init()
        })

    })();
</script>
</body>
</html>